<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>

<body>
    <div id="app" class="container">
        <label>编号：<input type="text" v-model="id"></label>
        <label>书名：<input type="text" v-model="bookname"></label>
        <label>价格：<input type="text" v-model="price"></label>
        <label>作者：<input type="text" v-model="author"></label>
        <button class="btn btn-primary" @click="addBook">添加</button>

        <hr>


        <!-- <ul v-for="(item, i) in bookList" :key="item.id">
            <ol><input type="checkbox">编号：{{item.id}} 书名：{{item.bookname}} 价格：{{item.price}} 作者：{{item.author}}</ol>
        </ul> -->


        <table class="table table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>作者</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in bookList" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.bookname}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.author}}</td>
                    <td>
                        <button class="btn btn-danger" @click="deleteBook(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                bookname: '',
                price: '',
                author: '',
                bookList: [{
                    id: '1122521',
                    bookname: "许三观卖血记",
                    price: "39.26",
                    author: "余华"
                }, {
                    id: '1122522',
                    bookname: "活着",
                    price: "42.26",
                    author: "余华"
                }, {
                    id: '1122523',
                    bookname: "围城",
                    price: "28.99",
                    author: "沈从文"
                }, {
                    id: '1122524',
                    bookname: "骆驼祥子",
                    price: "35.00",
                    author: "鲁迅"
                }, {
                    id: '1122525',
                    bookname: "三国演义",
                    price: "89.79",
                    author: "罗贯中"
                }]
            },
            methods: {
                addBook() {
                    this.bookList.unshift({
                        id: this.id,
                        bookname: this.bookname,
                        price: this.price,
                        author: this.author
                    });
                    this.id = '',
                        this.bookname = '',
                        this.price = '',
                        this.author = ''
                },
                deleteBook(id) {
                    var index = this.bookList.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    });
                    this.bookList.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>